<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>16-Object.defineProperty运用</title>
</head>
<body>
  <div>
    <input type="text" id="input">
    <button id="btn">点击赋值</button>
  </div>
  <script>
    'use strict'
    var obj1 = {}
    var age;
    Object.defineProperty(obj1, 'age', {
      set (value) {
        console.log('设置',value);
        age = value
      },
      get (value) {
        console.log('获取', value);
        return age
      }
    })
    document.querySelector('#input').onkeyup = function (e) {
      // console.log(e.target.value);
      obj1.age = e.target.value
      console.log('获取值了===',obj1.age);
      // console.log('为啥',age);
    }


    let temp = {
      a: 0,
    }
    //代理值。 通过property 给temp.a 赋值 和 取值 
    let property = 0;//代理值

    Object.defineProperty(temp, 'a', {
      get () {
        console.log('get到了');
        return ++property
      },
      set (value) {
        console.log('设置到了', value);
        /**
         * 在set中不能 temp.a 进行赋值。会陷入死循环，一直执行set方法。
         * 因为 对 temp.a 进行了赋值 就会执行set 函数
        */
        if (value > 100) {
          property = value
        } else {
          property = 0
        }
      }
    })

    // console.log(temp.a === 1 && temp.a === 2 && temp.a === 3);
    
    // temp.a = 200
    // console.log(temp.a)
    // temp.a = 10
    // console.log(temp.a)


    /**
     * 需求，给age赋值 必须是整数，才能赋值成功
     * 需求: console.log(objtemp.a === 1 && objtemp.a === 2 && objtemp.a === 3); true
    */
    let objtemp = {
      age: 1,
      a: 0,
    }
    let proxy = new Proxy(objtemp, {
      /**
       * target: 目标对象，在这里也就是objtemp
       * prop: 目标对象中的属性
       * value： 目标对象属性赋的值
      */
      set (target, prop, value) {
        console.log('set函数,给这个对象：',target,'的这个属性',prop, '赋值',value);
        if (prop == 'age') {
          //判断是否整数。
          if (Number.isInteger(value)) {
            console.log('age属性是整数');
            //给目标对象赋值
            // target[prop] = value
            return Reflect.set(target, prop, value)

          } else {
            //不做赋值操作
            console.log('age数组赋值的不是整数');
          }
        }
        //最后都要 必须返回 true
        return true
      },
      /**
       * target: 目标对象
       * prop: 被获取的属性名。
       * receiver: Proxy或者继承Proxy的对象
      */
      get (target, prop, receiver,) {
        console.log('get函数,得到这个对象：',target,'的这个属性',prop, receiver,);
        if (prop == 'age') {
          return target[prop]

        } else if (prop == 'a') {
          return ++target[prop]
        }

        
      }
    })
    console.log(proxy);
    document.querySelector('#btn').onclick = function () {
      console.log('按钮发生了点击');
      proxy.age = 100
      // proxy.age = 100.23
      // ====> 获取 proxy.age。才会触发 get函数 
      console.log(proxy, proxy.age);
    }

    console.log(proxy.a === 1 && proxy.a === 2 && proxy.a === 3)
    console.log(objtemp);

    
  </script>
</body>
</html>